<template>
	<view>
		<block>
			<uni-nav-bar @clickLeft="goBack" status-bar="true" shadow="true" left-icon="back" title="评论详情"></uni-nav-bar>
		</block>
		<view style="padding-bottom: 0px;">
			<view class="uni-comment-list" style="padding-left: 30upx;">
				<view class="uni-comment-face">
					<image :src="rootComment.commentator.avatar_url" mode="widthFix"></image>
				</view>
				<view class="uni-comment-body" style="padding-right: 15px; ">
					<view class="uni-comment-top" style="display: flex;" >
						<text>{{rootComment.commentator.name}}: 楼主</text>
						<view class="uni-comment-date" style="justify-content: flex-end;">
							<view style="padding-right: 15px; " >{{rootComment.createdAt | FormatDate('yyyy-MM-dd HH:mm:ss') }}</view>
						</view>
					</view>
					<view class="uni-comment-content">{{rootComment.content}}</view>
					
				</view>
			</view>
			<!-- <view style="height: 0.5px;background-color: #007AFF;"></view> -->
			<scroll-view upper-threshold="50" @scrolltoupper="refreshOne" :style="{height:scrowviewheight+'px'}" scroll-y="true"
			 @scrolltolower="loadmore()">
				<block v-for="(ite,indexx) in childComments" :key="indexx">
					<view class="uni-comment-list" style="padding-left: 50upx;" v-bind:class="{myactive:idFromNewsPage&&indexx==0}"
					 @tap="clickChildCommnet(ite)">
						<view class="uni-comment-face">
							<image :src="ite.commentator.avatar_url"  mode="widthFix"></image>
						</view>
						<view class="uni-comment-body" style=" padding-right: 50upx;" >
							<view class="uni-comment-top" style="display: flex;">
								<text>{{ite.commentator.name}}</text>
								<text>回复{{ite.replyTo.name}}:</text>
								<view class="uni-comment-date" style="justify-content: flex-end;">
									<view style="padding-right: 15px; " >{{ite.createdAt | FormatDate('yyyy-MM-dd HH:mm:ss') }}</view>
								</view>
							</view>

							<view class="uni-comment-content">{{ite.content}}</view>
							
						</view>
					</view>
				</block>
				<!-- 上拉加载 -->
				<view class="load-more">{{loadmoreText}}</view>
			</scroll-view>
		</view>
		<view class="comment-out">
			<textarea v-model="newComment" adjust-position="false" :placeholder="replyTo" :focus="getFocus" class="comment-text"
			 style="background-color: #FFFFFF;" fixed="true" placeholder-style="font-size:20px;" maxlength="100">
			</textarea>
			<view class="comment-send" @tap="sentComment">
				发送
			</view>
		</view>
		<image @tap="refresh" class="refresh-button icon iconfont icon-shuaxin" />
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	import config from "@/common/config.js"
	export default {
		components: {
			uniNavBar

		},
		data() {
			return {
				getFocus: false,
				rootComment: {},
				childComments: [],
				topicId: '',
				rootTopicId: '',
				rootCommentId: '',
				newComment: '',
				replyTo: '@楼主',
				replyToComment: {},
				scrowviewheight: 300,
				loadmoreText: '上拉加载更多',
				isLoadingMore: false,
				currentPage: 1,
				idFromNews: '' ,//commentIdFromNews, 变量太长会引起赋值失败的bug
				
			}
		},
		onLoad(option) {
			uni.getSystemInfo({
				success: (res) => {
					//减去顶部tab，底部tabbar，顶部搜索,顶部搜索margin-top
					let windowHight = res.windowHeight - uni.upx2px(100) - uni.upx2px(100) - uni.upx2px(100) - uni.upx2px(100);
					this.scrowviewheight = windowHight;
				}
			});
			console.log(option + "ggggggoo");
			this.topicId = option.topicId;
			this.rootTopicId = option.rootTopicId;
			this.rootCommentId = option.commentId;
			this.idFromNews = option.commentIdFromNewspage;
			console.log(this.idFromNews);
			this.getRecorderCommentList(1);
			this.getCommentDetailById();
		},
		computed: {
			idFromNewsPage: function() {
				return this.idFromNews && this.idFromNews.length > 0 && this.childComments[0] && this.childComments[0]._id == this
					.idFromNews;
			}
		},
		onPullDownRefresh() {
			this.initData();
		},
		methods: {
			loadmore() {
				if (!this.isLoadingMore && this.loadmoreText != "没有更多数据") {
					this.isLoadingMore = true;
					this.loadmoreText = "数据加载中..";
					this.getRecorderCommentList(this.currentPage);
				}

			},
			refreshOne() {
				console.log("refreshOne====")
			},
			refresh() {
				uni.startPullDownRefresh({

				})
			},
			initData() {
				this.currentPage = 1;
				this.getRecorderCommentList(1);
			},
			getRecorderCommentList(page) {
				var topicId = this.topicId;
				var rootCommentId = this.rootCommentId;
				console.log(this.idFromNews);
				var commentIdFromNewsPage = this.idFromNews;
				console.log('fffff');
				console.log(commentIdFromNewsPage);
				console.log(rootCommentId);

				if (this.idFromNews) {
					var url = config.baseUrl + '/topics/' + topicId + '/comments?rootCommentId=' + rootCommentId + '&page=' + page +
						'&idFromNews=' + commentIdFromNewsPage;
				} else {
					var url = config.baseUrl + '/topics/' + topicId + '/comments?rootCommentId=' + rootCommentId + '&page=' + page;
				}
				uni.request({
					method: 'GET',
					url: url,
					success: (res) => {
						var statusCode = res.statusCode;
						if (200 == statusCode) {
							if (page === 1) {
								this.childComments = res.data;
							} else {
								this.childComments = this.childComments.concat(res.data);
							}
							if (res.data.length > 0) {
								this.loadmoreText = "上拉加载更多";
								this.currentPage = this.currentPage + 1;
							} else {
								this.loadmoreText = "没有更多数据";
								console.log(this.currentPage + ':没有更多数据');
							}
							console.log(res.data);
						} else {
							this.loadmoreText = "上拉加载失败";
							console.log('else');
						}
					},
					fail: (res) => {
						this.loadmoreText = "上拉加载失败";
						console.log('fail');
					},
					complete: () => {
						this.isLoadingMore = false;
						uni.stopPullDownRefresh();
					}
				});

			},
			getCommentDetailById() {
				var topicId = this.topicId;
				var rootCommentId = this.rootCommentId;
				console.log('uuubbnbnb=='+topicId);

				console.log(rootCommentId);
				var url = config.baseUrl + '/topics/' + topicId + '/comments/' + rootCommentId;
				uni.request({
					method: 'GET',
					url: url,
					success: (res) => {
						var statusCode = res.statusCode;
						console.log(topicId + "评论详情");
						console.log(statusCode);
						if (200 == statusCode) {

							this.rootComment = res.data;
							console.log("uuuudd")
							console.log(this.rootComment);
						} else {
							console.log('else');
						}
					},
					fail: (res) => {
						console.log('fail');
					},
					complete: () => {
						uni.stopPullDownRefresh();
					}
				});

			},
			clickChildCommnet(ite) {
				if (this.getFocus) {
					this.getFocus = false;
				} else {
					this.getFocus = true;
				}
				this.replyTo = '@' + ite.commentator.name;
				this.replyToComment = ite;
			},
			sentComment() {
				var rootTopicId = this.rootTopicId;
				var topicId = this.topicId;
				var newComment = this.newComment;
				var rootCommentId = this.rootCommentId;
				var replyToUer = this.replyToComment.commentator;
				if (!replyToUer) {
					replyToUer = this.rootComment.commentator;
				}
				var data = {
					rootTopicId: rootTopicId,
					content: newComment,
					rootCommentId: rootCommentId,
					replyToUer: replyToUer
				}
				var token = uni.getStorageSync(config.token);
				//http://127.0.0.1:3000/topics/5e0ffbfe468ec052e0d91a4f/comments
				var b = config.baseUrl + '/topics/' + topicId + '/comments';
				console.log('tttttt=='+b);
				uni.request({
					method: 'POST',
					url: b, //仅为示例，并非真实接口地址。
					data: data,
					header: {
						'content-type': 'application/json', //自定义请求头信息
						'Authorization': 'Bearer ' + token //通过登录接口，生成新的token
					},
					success: (res) => {
						console.log(res);
						var statusCode = res.statusCode;
						console.log(statusCode);
						if (200 == statusCode) {
							console.log("rrr" + res.data);
							this.newComment = '';
							// this.childComments =this.childComments.concat(res.data);
							this.childComments.unshift(res.data);
							uni.showToast({
								title: "回复成功",
								duration: 3000
							});

						} else if (401 == statusCode) {
							//token 相关到错误
							//1,session过期或不存在：直接手机号和密码登录（后期短信验证码），返回token
							//2，session 有效：session登录(一键登录)，返回token
							//跳转后显示微信登录按钮。
							this.checkSession();

						} else {
							uni.showToast({
								title: "回复失败",
								duration: 2000,
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: "回复失败"
						});
					}
				});



			},
			goBack() {
				if (this.idFromNews) {
					console.log("go record detail");
					var rootTopicId = this.rootTopicId ;
					var currentTopicId = this.topicId ;
					var commentId = this.rootCommentId ;
					var url = '../recorderdetail/recorderdetail?id=' + rootTopicId + '&currentTopicId=' + currentTopicId +
						'&commentId=' + commentId;
						console.log('====='+url);
					uni.navigateTo({
						url
					});
				} else {
					uni.navigateBack({

					})
				}

			},
			checkSession(){
				uni.checkSession({
					success: (e) => {
						var weixinsession = uni.getStorageSync(config.sessionkey);
						if (weixinsession.length > 0) {
							uni.navigateTo({
								url: '../loginnew/loginnew'
							})
						} else {
							uni.navigateTo({
								url: '../authorityRequst/authorityRequst'
							})
						}
				
					},
					fail: () => {
						console.log("yijinggoqdi")
						uni.navigateTo({
							url: '../authorityRequst/authorityRequst'
						})
					}
				});
			}
		}
	}
</script>

<style>
	.comment-out {
		display: table;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.comment-text {

		display: table-cell;
		width: 80%;
		height: 100upx;
		font-size: 40upx;
		background-color: #F4F5F6;
	}

	.comment-send {
		text-align: center;
		vertical-align: middle;
		display: table-cell;
		font-size: 40upx;
		color: #FFFFFF;
		background-color: #F0AD4E;
	}

	.refresh-button {
		position: fixed;
		bottom: 200upx;
		right: 30upx;
		width: 90upx;
		height: 90upx;
		font-size: 60upx;
		color: #007AFF;
	}

	.load-more {
		text-align: center;
		color: #AAAAAA;
		padding: 15upx;
	}

	.myactive {
		background-color: #AAAAAA;
	}
	.uni-comment-content{
		font-size: large;
	}
</style>
